
//el-select下拉搜索框的滚动加载更多

/**
 * document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）
Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。
Element.clientHeight：读取元素的可见高度（只读）。
元素滚动到底，下面等式返回true，没有则返回false。
警告： 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数
 */
import Vue from 'vue'
export default {}.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    inserted(el, binding) {
      // 获取element-ui定义好的scroll盒子
      const SELECTDOWN_DOM = el.querySelector(
        '.el-select-dropdown .el-select-dropdown__wrap'
      )
      SELECTDOWN_DOM.addEventListener('scroll', function () {
        const CONDITION =
          this.scrollHeight - this.scrollTop <= this.clientHeight
        if (CONDITION) {
          binding.value()
        }
      })
    },
  })
}
